<template>
  <!-- 标签栏 -->
  <van-tabs v-model:active="StatusActive" sticky @click-tab="TabChange">
    <van-tab v-for="(item, key) in StatusList" :title="item.title" :name="item.value" :key="key"></van-tab>
  </van-tabs>

  <!-- 下拉刷新 -->
  <van-pull-refresh v-model="refreshing" @refresh="refresh">
    <!-- 加载列表 -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      :offset="10"
      :immediate-check="true"
      finished-text="没有更多了"
      @load="load"
    >
      <!-- 商品卡片 -->
      <van-card
        title="商品名称"
        :thumb="orderProduct.product_product.thumbs_text"
        :num="orderProduct.pronum"
        :tag="orderProduct.product_product.flag_text"
        v-for="(orderProduct,key) in list"
        :key="key"
        @click-thumb="toProductInfo(orderProduct.proid)"
      >
        <template #title>
          <div class="title">订单号：{{orderProduct.order.code}}</div>
        </template>

        <!-- 卡片的插槽部分 -->
        <template #desc>
          <van-tag 
          class="tag" 
          type="danger" 
          v-for="(prop,index) in orderProduct.prop_list"
          :key="index"
          >{{prop}}</van-tag>
        </template>

        <template #tags>
          <div class="price">下单时间：{{orderProduct.order.createdate}}</div>
        </template>

        <template #price>
          <div class="price">订单总价：￥{{orderProduct.orderTotal}}</div>
        </template>

        <template #footer>
          <!-- status >= 1 仅退款或者退货退款 -->
          <van-button class="button" type="danger" size="small" v-if="orderProduct.status=='0'||orderProduct.status>'1'" @click="refund(orderProduct.id)">
            {{orderProduct.status=='0'?'申请退款':'申请退货退款'}}
          </van-button>
          <!-- status == -2 仅退款或者退货退款 -->
          <van-button class="button" type="danger" size="small" v-if="orderProduct.status=='-2'" disabled>
            申请中
          </van-button>
          <!-- status == -3 退货中 -->
          <van-button class="button" type="danger" size="small" v-if="orderProduct.status=='-3'" @click="getBackInfo(orderProduct.code)">
            售后中
          </van-button>
          <!-- status == -1||-4 仅退款或者退货退款成功 -->
          <van-button class="button" type="danger" size="small" v-if="orderProduct.status=='-1'||orderProduct.status=='-4'" disabled>
            退款完成
          </van-button>
          <!-- status == -5 仅退款或者退货退款成功 -->
          <van-button class="button" type="danger" size="small" v-if="orderProduct.status=='-5'" disabled>
            退货失败
          </van-button>
          <!-- status = 2 -->
          <van-button class="button" type="success" size="small" v-if="orderProduct.status=='1'" @click="takeover(orderProduct.id,key)">确认收货</van-button>
          <van-button class="button" type="warning" size="small" v-if="orderProduct.status>='1'" @click="expressquery(orderProduct.id)">物流详情</van-button>
          
          <!-- status = 3 已收货 -->
          <van-button class="button" type="warning" size="small" v-if="orderProduct.status>='2'" @click="comment(orderProduct.id)">
            {{orderProduct.status=='2'?'立即评价':'查看评价'}}
          </van-button>

          <van-button class="button" type="primary" size="small" @click="OrderInfo(orderProduct.id)">订单详情</van-button>
        </template>
      </van-card>
    </van-list>
  </van-pull-refresh>

  <!-- 退款的弹框 -->
  <van-popup v-model:show="ApplyShow" position="bottom">
    <van-form @submit="refundConfirm">
      <van-field
        v-model="refundreason"
        name="refundreason"
        rows="5"
        autosize
        type="textarea"
        maxlength="120"
        placeholder="请输入申请原因"
        show-word-limit
        :rules="[{ required: true, message: '请填写申请原因' }]"
      />
      <van-button square block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" native-type="submit">提交申请</van-button>
    </van-form>
  </van-popup>
  <van-dialog v-model:show="backShow" title="退货">
    <van-cell-group>
    <van-cell title="联系人" :value="backInfo.contact" />
    <van-cell title="联系电话" :value="backInfo.phone" />
    <van-cell title="物流单号" :value="backInfo.expresscode" />
</van-cell-group>
  </van-dialog>
</template>

<script setup>
  const {proxy} = getCurrentInstance()
  
  //标签栏数据
  let StatusActive = ref('')
  let StatusList = ref([
    {title: '全部', value: ''},
    {title: '未发货', value: '0'},
    {title: '已发货', value: '1'},
    {title: '已收货', value: '2'},
    {title: '已完成', value: '3'},
    {title: '退货退款', value: '-1'},
  ])

  //下拉刷新的数据
  let list = ref([]) //数据列表
  let page = ref(1)  //分页
  let loading = ref(false) //加载状态
  let finished = ref(false) //是否无更多数据
  let refreshing = ref(false) //下拉刷新



  // 标签栏切换
  const TabChange = async ({ name }) => 
  {
    refresh()
  }

  //下拉刷新
  const refresh = async () =>
  {
    //清空查询参数
    page.value = 1
    list.value = []
    finished.value = false
    loading.value = true
    load()
  }

  //加载数据方法 查询订单数据
  const load = async () =>
  {
    let result = await proxy.$GET({
      url:'/order',
      params:{
          page:page.value,
          pageSize:6,
          status:StatusActive.value
      }
    })
    if(result)
    {
      list.value = list.value.concat(result.data)
      refreshing.value = false
      loading.value = false
      finished.value = !result.has_more
      if(result.has_more)  page.value++
    }
  }

  //跳转订单详情
  const OrderInfo = (id) => proxy.$router.push(`/order/info?id=${id}`)

  // 申请仅退款
  const orderProductId = ref(0)
  let ApplyShow = ref(false)
  let refundreason = ref('')
  const refund = (refundId)=>{
    ApplyShow.value = true
    orderProductId.value = refundId
  }
  const refundConfirm = async()=>{
    let result = await proxy.$PUT({
      url:'/order/refund',
      params:{orderProductId:orderProductId.value},
      data:{refundreason:refundreason.value}
    })
    if(result.code)
    {
        showSuccessToast(result.msg)
        list.value.map((l)=>{
          if(l.id==orderProductId.value)
          {
            l.status=='0'?(l.status='-1'):(l.status='-2')
          }
          return l;
        })
    }else{
        showFailToast(result.msg)
    }
    ApplyShow.value = false
  }
  const comment = (orderProductId)=>proxy.$router.push(`/order/comment?id=${orderProductId}`)
  const expressquery = (orderProductId)=>proxy.$router.push(`/order/express?id=${orderProductId}`)
  const takeover = async(orderProductId,index)=>{
    let result = await proxy.$PUT({url:'/order/takeover',params:{orderProductId}})
    if(result.code)
    {
        showSuccessToast(result.msg)
        list.value[index].status = '2'
    }else{
        showFailToast(result.msg)
    }
  }
  const toProductInfo = (id)=>proxy.$router.push(`/product/info?id=${id}`)
  const backShow = ref(false)
  const backInfo = ref({})
  const getBackInfo = async(ordercode)=>{
    let result = await proxy.$GET({
      url:'/order/refund',
      params:{ordercode},
    })
    if(!result.code){
      showFailToast(result.msg)
      return
    }
    backInfo.value = result.data
    backShow.value = true
  }
</script>


<style scoped>
  @import url('/assets/css/OrderIndex.css');
</style>
  